// components/dialog/dialog1/dialog1.js

// https://www.jb51.net/article/233810.htm
Component({

  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },

  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      // key是title。类型是string 。使用类似组件(view)的id属性
      type: String,
    },
    id: {
      // 尝试是否会冲突
      type: String,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    show: false,
    zIndex: 0,
    ablClickMask: true,// 点击蒙层是否可以取消
    hasCloseBtn: false,
    title: '标题',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 方法名，参数
    show(params, onCancel, onConfirm) {
      console.log('自定义组件内1的 show 00 ', params,'<<>>',JSON.stringify(this.data))
      // this.setData({
      //   show: true,
      //   zIndex: params.zIndex || 0,
      //   title:params.title || this.data.title
      // })
      const { data } = this; // 从对象中取出属性注意属性名要一样。
      // 动态更新属性
      for (let key in params) {
        if (data.hasOwnProperty(key)) {
          data[key] = params[key];
        }
      }
      data.show = true
      console.log('自定义组件内1的 show 11-- ', data,'<<>>',JSON.stringify(this.data))
      this.setData(data) // 这个才会驱动刷新UI
      console.log('自定义组件内1的 show 22-- ', JSON.stringify(this.data))
      this._onCancel = onCancel;
      this._onConfirm = onConfirm;
    },
    hide() {
      console.log('自定义组件1内的 hide')
      this.setData({
        show: false
      })
    },
    _onMaskHide() {
      console.log('自定义组件1内的 onMaskHide')
      if (this.data.ablClickMask) {
        this.hide() // 这里隐藏
        if (this._onCancel()) this._onCancel() // 回调出去

        // 传递点击给key：onConfirm。外部使用。bind:加key
        this.triggerEvent('maskEvent')
      }
    }
  }
})